<template>
  <div class="channel-item">
    <!-- 我的频道 -->
    <van-cell class="my-cell" :border="false">
      <span slot="title" class="title">我的频道</span>
      <van-button class="edit-button" plain type="danger" size="mini" round slot="right-icon" @click="isIcon=!isIcon">
        {{isIcon?'完成':'编辑'}}
      </van-button>
    </van-cell>
    <!-- 小方格 -->
    <van-grid :gutter="10" :border="false">
      <van-grid-item class="item" v-for="(item,ind) in myChannels" :key="ind" @click="onClickChannel(item,ind)"
        :icon="(isIcon&&ind!==0) ? 'close' : ''">
        <!-- <van-icon slot="icon" name="close" v-show="isIcon && ind!==0" /> -->
        <span slot="text" :class="{active:active===ind}" class="text">{{item.name}}</span>
      </van-grid-item>
    </van-grid>

    <!-- 推荐频道 -->
    <van-cell title="推荐频道" class="recommend-cell" :border="false" />
    <van-grid class="item recommend-item" :gutter="10" :border="false" direction="horizontal">
      <van-grid-item icon="plus" v-for="item in recommendChannels" :key="item.id" :text="item.name"
        @click="onAddChannel(item)" />
    </van-grid>
  </div>
</template>

<script>
// 导入接口
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/article.js'
// 储存本地数据
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
// 定义本地存储常量
const TOUTIAO_CHANNEL = 'TOUTIAO_CHANNEL'
export default {
  name: 'channel-item',
  props: {
    myChannels: {
      type: Array,
      require: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      // 存放所有频道
      allChannels: [],
      // 控制编辑
      isIcon: false
    }
  },
  methods: {
    // 删除用户频道
    async deleteChannel (id) {
      try {
        // 已登录 存储线上
        if (this.user) {
          await deleteUserChannel(id)
          this.$toast('删除成功')
        } else {
          // 存储本地
          setItem(TOUTIAO_CHANNEL, this.myChannels)
        }
      } catch (err) {
        this.$toast('删除失败,请稍候重试')
      }
    },
    // 我的频道点击事件
    onClickChannel (channel, index) {
      if (this.isIcon) {
        // 编辑状态进行删除
        // 若为推荐  直接跳转
        if (index === 0) return
        // 删除所选目标之前  会导致高亮后移一位
        if (index <= this.active) {
          this.$emit('updateChannel', {
            close: true,
            index: this.active - 1
          })
        }
        this.myChannels.splice(index, 1)
        // 删除数据持久化
        this.deleteChannel(channel.id)
      } else {
        // 点击跳转
        this.$emit('updateChannel', {
          close: false,
          index
        })
      }
    },
    // 点击添加频道至我的
    async onAddChannel (channel) {
      this.myChannels.push(channel)
      if (this.user) {
        // 已登录
        try {
          await addUserChannel({
            id: channel.id, // 频道id
            seq: this.myChannels.length // 频道序号
          })
          this.$toast('添加成功')
        } catch (err) {
          this.$toast('添加失败')
          console.log(err)
        }
      } else {
        // 未登录存储本地数据
        setItem(TOUTIAO_CHANNEL, this.myChannels)
      }
    },
    // 获取所有频道
    async loadAllchannels () {
      try {
        const { data: res } = await getAllChannels()
        // console.log(res.data)
        this.allChannels = res.data.channels
        console.log(this.allChannels)
      } catch (err) {
        this.$toast('获取数据失败')
      }
    }
  },
  computed: {
    // 推荐频道 = 所有频道 - 我的频道
    recommendChannels () {
      return this.allChannels.filter(item => {
        const myChannel = this.myChannels.find(channel => {
          return channel.id === item.id
        })
        return !myChannel
      })
    },
    // 获取user
    ...mapState(['user'])
  },
  watch: {},
  filters: {},
  components: {},
  created () {
    this.loadAllchannels()
  },
  mounted () { }
}
</script>

<style lang='less' scoped>
.channel-item {
  margin: 80px 8px;

  .title {
    color: #333;
    font-size: 32px;
  }
  .edit-button {
    width: 104px;
    height: 48px;
  }

  /deep/ .item {
    height: 86px;
    .van-grid-item__content {
      width: 155px;
      height: 86px;
      border-radius: 7px;
      background-color: #f5f5f6;
      color: #646566;
      font-size: 12px;
      .van-grid-item__text .text {
        line-height: 112.5px;
        white-space: nowrap;
      }
    }

    .van-icon-close {
      position: absolute;
      right: 4px;
      top: -17px;
      font-size: 36px;
      color: #333;
    }

    .active {
      color: #ee0a24;
    }
  }

  //推荐频道
  .recommend-cell {
    color: #333;
    font-size: 32px;
  }

  /deep/ .recommend-item .van-grid-item__icon {
    font-size: 24px;
  }
  /deep/ .van-grid-item__text {
    margin-left: 3px;
    white-space: nowrap;
  }
}
</style>
